<template>
  <div class="nav-bar">
    <div
      class="nav-bar-con"
      :style="{
        position: fixed ? 'fixed' : 'relative',
        height,
        lineHeight: height,
        background,
      }"
    >
      <div class="left-wrap">
        <div class="btn-back" @click="back">
          <i class="iconfont">&#xe671;</i>
        </div>
      </div>
      <div class="title">{{ title }}</div>
      <div class="right-wrap">
        <div class="btn" @click="rightClick">
          <span class="text">{{ rightText }}</span>
          <slot name="right"></slot>
        </div>
      </div>
    </div>
    <div v-if="fixed" :style="{ height }"></div>
  </div>
</template>

<script>
export default {
  name: "NavBar",
  props: {
    // 是否启动固定定位
    fixed: Boolean,
    // 右侧文字
    rightText: String,
    // 高度
    height: {
      type: String,
      default: "50px",
    },
    // 背景颜色
    background: {
      type: String,
      default: "#fff",
    },
  },
  data() {
    return {
      title: "",
    };
  },
  mounted() {
    this.title = this.$route.meta.title;
  },
  methods: {
    rightClick() {
      this.$emit("rightClick");
    },
    back() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  width: 100%;

  .nav-bar-con {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 8000;
    border-bottom: 1px solid #f5f5f5;
    box-sizing: border-box;

    > div {
      flex: 1;
      height: 100%;
    }

    .left-wrap {
      .btn-back {
        width: 45px;
        height: 100%;
        text-align: center;

        .iconfont {
          color: #323233;
        }
      }
    }

    .title {
      color: #000;
      font-size: 15px;
      text-align: center;
      flex: 1.5;
    }

    .right-wrap {
      display: flex;
      justify-content: flex-end;
      text-align: right;

      .btn {
        width: 45px;
        height: 100%;
        text-align: center;

        .text {
          font-size: 14px;
        }

        .iconfont {
          color: #323233;
        }
      }
    }
  }
}
</style>
